<template>
  <div :class="classes" :style="styles">
    <slot></slot>
  </div>
</template>

<script>
import { findComponentUpward } from '../../utils/util'

const prefixCls = 'bin-col'

export default {
  name: 'BCol',
  props: {
    span: [Number, String],
    order: [Number, String],
    offset: [Number, String],
    push: [Number, String],
    pull: [Number, String],
    className: String,
    xs: [Number, Object],
    sm: [Number, Object],
    md: [Number, Object],
    lg: [Number, Object],
    xl: [Number, Object],
    xxl: [Number, Object]
  },
  data() {
    return {
      gutter: 0
    }
  },
  computed: {
    classes() {
      let classList = [
        `${prefixCls}`,
        {
          [`${prefixCls}-span-${this.span}`]: this.span,
          [`${prefixCls}-order-${this.order}`]: this.order,
          [`${prefixCls}-offset-${this.offset}`]: this.offset,
          [`${prefixCls}-push-${this.push}`]: this.push,
          [`${prefixCls}-pull-${this.pull}`]: this.pull,
          [`${this.className}`]: !!this.className
        }
      ];

      ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
        if (typeof this[size] === 'number') {
          classList.push(`${prefixCls}-span-${size}-${this[size]}`)
        } else if (typeof this[size] === 'object') {
          let props = this[size]
          Object.keys(props).forEach(prop => {
            classList.push(
                prop !== 'span'
                    ? `${prefixCls}-${size}-${prop}-${props[prop]}`
                    : `${prefixCls}-span-${size}-${props[prop]}`
            )
          })
        }
      })

      return classList
    },
    styles() {
      let style = {}
      if (this.gutter !== 0) {
        style = {
          paddingLeft: this.gutter / 2 + 'px',
          paddingRight: this.gutter / 2 + 'px'
        }
      }

      return style
    }
  },
  methods: {
    updateGutter() {
      const row = findComponentUpward(this, 'BRow')
      if (row) {
        row.updateGutter(row.gutter)
      }
    }
  },
  mounted() {
    this.updateGutter()
  },
  beforeDestroy() {
    this.updateGutter()
  }
}
</script>
